<template>
    <el-form :model="form" status-icon :rules="rules" ref="form" class="myaddaddform">
        <el-form-item label="收货人:" :label-width="formLabelWidth" prop="name">
        <el-input v-model="form.name" autocomplete="off" style="width: 220px;"></el-input>
        </el-form-item>
        <el-form-item label="省/直辖市:" :label-width="formLabelWidth" prop="province">
        <el-select v-model="form.province">
            <el-option v-for="provincelist in provincelist" :key="provincelist.code"
            :label="provincelist.name" 
            :value="`${provincelist.name}|${provincelist.code}`">
                <span style="float: left">{{provincelist.name}}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{provincelist.code}}</span>
            </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="城市:" :label-width="formLabelWidth" prop="city">
        <el-select v-model="form.city">
            <el-option v-for="citylist in citylist" :key="citylist.code"
            :label="citylist.name" 
            :value="`${citylist.name}|${citylist.code}`">
                <span style="float: left">{{citylist.name}}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{citylist.code}}</span>
            </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="区县:" :label-width="formLabelWidth" prop="area">
        <el-select v-model="form.area">
            <el-option v-for="arealist in arealist" :key="arealist.code"
            :label="arealist.name" 
            :value="`${arealist.name}|${arealist.code}`">
            <span style="float: left">{{arealist.name}}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{arealist.code}}</span>
            </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="详细地址:" :label-width="formLabelWidth" prop="detailed_address">
        <el-input type="textarea" v-model="form.detailed_address" autocomplete="off" 
        placeholder="请您输入到具体的小区名称、门牌号等" style="width: 260px;"></el-input>
        </el-form-item>
        <el-form-item label="手机" :label-width="formLabelWidth" prop="phone">
        <el-input v-model="form.phone" autocomplete="off" style="width: 220px;"></el-input>
        </el-form-item>
        <el-form-item label="固定电话" :label-width="formLabelWidth" prop="tel">
        <el-input v-model="form.tel" autocomplete="off" placeholder="固定电话可选填"
        style="width: 220px;"></el-input>
        </el-form-item>
            <el-form-item label="地址类型" :label-width="formLabelWidth" prop="tag">
                <el-radio-group v-model="form.tag" size="mini">
                <el-radio border label="学校" style="width: 32px;"></el-radio>
                <el-radio border label="公司" style="width: 32px;"></el-radio>
                <el-radio border label="家" style="width: 32px;"></el-radio>
            </el-radio-group>
        </el-form-item>
    <div style="text-align: center;">
        <el-button type="warning" @click="resetForm('form')">重 置</el-button>
        <el-button @click="gobacktomanagement">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
    </div>
    </el-form>
</template>

<script>
import axios from 'axios'
export default {
    name:'PxChangeAddAdd',
    props:{
        FromRouterDataaa:0,
    },
    data(){
        var checkPhone = (rule, value, callback) => {
            if (!value) {
            return callback(new Error('手机号码不能为空'));
            }
            setTimeout(() => {
            if (isNaN(value)) {
                callback(new Error('请输入数字值'));
            } else {
                if (value.length != 11) {
                callback(new Error('手机号码必须为11位数字'));
                } else {
                callback();
                }
            }
            }, 200);
        };
        return{
            FromRouterData:0,
            OldRouter:'',
            provincelist:[],
            citylist:[],
            arealist:[],
            formLabelWidth: '100px',
            province_name:'',
            city_name:'',
            area_name:'',
            province_code:'',
            city_code:'',
            area_code:'',
            form:{
                name: '',
                province:'',
                city:'',
                area:'',
                detailed_address:'',
                phone:'',
                tel:'',
                tag:'',
            },
            rules:{
                name:[{
                    required: true, message: '请输入收货人姓名', trigger: 'blur'
                }],
                province: [{
                    required: true, message: '请选择省/直辖市', trigger: 'change'
                }],
                city: [{
                    required: true, message: '请选择所在城市', trigger: 'change'
                }],
                area: [{
                    required: true, message: '请选择所在区县', trigger: 'change'
                }],
                detailed_address:[{
                    required: true, message: '请输入详细收货地址', trigger: 'blur'
                }],
                phone:[{
                    required: true, validator: checkPhone, trigger: 'blur'
                }],
                tel:[{
                    required: false, message: '请输入固定电话', trigger: 'blur'
                }],
                tag:[{
                    required: true, message: '请选择地址类型', trigger: 'blur'
                }],
            }
        }
    },
    methods:{
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                this.$addr.get(`addresses/add_new_address?name=${this.form.name}&provinceName=${this.province_name}&cityName=${this.city_name}&areaName=${this.area_name}&address=${this.province_name+this.city_name+this.area_name+this.form.detailed_address}&phone=${this.form.phone}&tel=${this.form.tel}&tag=${this.form.tag}`).then(
                response=>{
                    console.log('请求成功了,添加了新的收货地址',response)
                    this.$notify.success({
                        title: '提示',
                        message: '恭喜你,添加新的收货地址成功!',
                    });
                    this.$router.push({name:'PxChangeAddRefresh',
                                    params:{data:this.FromRouterData}})
                },error=>{
                    this.$message({
                        message: '呕吼请求失败了',
                            type: 'warning'
                        });
                    console.log('请求失败了,我没有响应本次数据',error)
                })
                // this.$bus.$emit('FormVisible',0)
                console.log('submit!');
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        gobacktomanagement(){
            this.$bus.$emit('FormVisible',0)
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
    mounted(){
        this.FromRouterData=this.FromRouterDataaa
        this.OldRouter=this.$route.params.OldRouter
        this.$addr.get(`districts?parent=86`).then(
        response=>{
            console.log('请求成功了,我获取到了省/直辖市数据',response)
            this.provincelist=response.data.data
        },error=>{
            this.$message({
                message: '呕吼请求失败了',
                    type: 'warning'
                });
            console.log('请求失败了,我没有获取到用户的数据',error)
        })
    },
    watch:{
        'form.province'(val){
        this.form.city=this.form.area=''
        let [province_name,province_code] = val.split('|') // es6 数组解构赋值
        this.province_name=province_name
        this.province_code=province_code
        this.$addr.get(`districts?parent=${province_code}`).then(
        response=>{
            console.log('请求成功了,我获取到了该城市数据',response)
            this.citylist=response.data.data
        },error=>{
            this.$message({
                message: '呕吼请求失败了',
                    type: 'warning'
                });
            console.log('请求失败了,我没有获取到用户的数据',error)
        })
        },
        'form.city'(val){
            this.form.area=''
        let [city_name,city_code] = val.split('|') // es6 数组解构赋值
        this.city_name=city_name
        this.city_code=city_code
        this.$addr.get(`districts?parent=${city_code}`).then(
        response=>{
            console.log('请求成功了,我获取到了该区县数据',response)
            this.arealist=response.data.data
        },error=>{
            this.$message({
                message: '呕吼请求失败了',
                    type: 'warning'
                });
            console.log('请求失败了,我没有获取到用户的数据',error)
        })
        },
        'form.area'(val){
            let [area_name,area_code] = val.split('|') // es6 数组解构赋值
            this.area_name=area_name
            this.area_code=area_code
        },
    },
    
}
</script>

<style scoped>
.myaddaddform{
    padding-bottom: 15px;
    padding-top: 30px;
    margin-top: 5px;
}
</style>